import React, { useCallback, useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { message, Input, Form, Button, DatePicker, Space } from 'antd';
import request from '../../../utils/request';
import moment from 'moment'


const Edit = () => {

    const [form] = Form.useForm();
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();

    // 第一步：获取数据，写入表单
    const [category, setCategory] = useState({})
    const getData = async () => {
        const { data } = await request.get('/category/' + id)

        const currentData = data.data[0]
        console.log('edit_category', currentData);
        setCategory(currentData)

        currentData.addtime = moment(currentData.addtime)
        console.log('currentData', currentData)
        form.setFieldsValue(currentData); // {name:111,addtime:190}
        // form.setFieldValue('name', data.data[0].name)


    }




    // 修改分类
    const submit = async (values) => {
        const { data } = await request.patch('/category/' + id, values)
        console.log('修改', data);
        if (data.status === 200) {
            message.success('分类修改成功')
            navigate('/manage/category/list')
        }

    }


    // 这个是取消修改，返回列表页面的
    const back = useCallback(() => {
        navigate('/manage/category/list')
    }, [])

    useEffect(() => {
        getData()
    }, [])

    return (
        <div>
            <Form
                form={form}
                initialValues={category}
                onFinish={submit}
            >
                <Form.Item label="分类名称" name='name'>
                    <Input width={200} />
                </Form.Item>
                <Form.Item label="提交时间" name='addtime'>
                    {/* <Input width={200} /> */}
                    <DatePicker format='YYYY/MM/DD HH:mm:ss' />
                </Form.Item>
                <Form.Item >
                    <Space>
                        <Button type="primary" htmlType='submit'>确认修改</Button>
                        <Button type="primary" ghost onClick={back}>取消修改</Button>
                    </Space>

                </Form.Item>
            </Form>
        </div>
    )

}



export default Edit;